<!-- xiaomu封装的组件：签约管理、服务管理、居民管理的 详情 -->
<template>
  <div class="mu-detail">
    <el-form>
      <el-form-item label="姓名">
        <span style="color: var(--el-color-primary);">{{ formData.name }}</span>
      </el-form-item>
      <el-form-item label="身份证号">
        <span>{{ formData.IDnumber }}</span>
      </el-form-item>
      <el-form-item label="性别">
        <span>{{ formData.gender ? '男' : '女' }}</span>
      </el-form-item>
      <el-form-item label="年龄">
        <span>{{ 2025 - formData.birthday?.split('-')[0] }}</span>
      </el-form-item>
      <el-form-item label="联系电话">
        <span>{{ formData.phone }}</span>
      </el-form-item>
      <el-form-item label="现居地">
        <span>{{ formData.address }}</span>
      </el-form-item>
    </el-form>
    <!-- 家庭成员 -->
    <div style="display: flex;">
      <span style="font-size: 14px;">家庭成员</span>
      <mu-family-item />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(['formData']);
</script>

<style scoped lang="scss">
.mu-detail {

  // 去掉 label 左外边距
  :deep(.el-form-item__label-wrap) {
    margin-left: 0 !important;
  }

  .el-form {
    display: grid;
    grid-template-columns: repeat(4, 340px);
    grid-template-rows: repeat(2, 50px);
    justify-content: space-between;
  }
}
</style>